<template>
  <div id="house_view_search_area">

  </div>
  <div id="house_view_content" style="width: 1150px;margin: 0 auto;">
    <p id="house_view_content_title">{{house.title}}</p>
    <div id="house_view_content_sub_title">
      房源维护时间：{{house.subtitle.time}}
      贝壳官方投诉电话：{{house.subtitle.phone}}
    </div>
    <div id="house_view_content_core">
      <div id="house_view_content_core_left">
        <el-carousel trigger="click" indicator-position="outside" height="360px">
          <el-carousel-item v-for="item in house.imgurls" :key="item">
            <img :src="item">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div id="house_view_content_core_right">
        <div id="house_view_content_core_right_title">
          <span id="house_view_content_core_right_title_span">{{house.price}}</span>元/月 (季付价)
        </div>
        <div id="house_view_content_core_right_tag">
          <img style="margin-right: 5px;width: 62px;height: 23px;vertical-align: top;" src="good-tag-detail.png">
          <i class="house_view_content_core_right_tag_i" v-for="item in house.tags">{{item}}</i>
        </div>
        <div id="house_view_content_core_right_detail">
          <ul id="house_view_content_core_right_detail_ul">
            <li class="house_view_content_core_right_detail_ul_li" v-for="simple in house.simple_message">
              <span class="house_view_content_core_right_detail_ul_li_span">{{simple.key}}:</span>
              {{simple.value}}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <el-menu>
      <el-row>
        <el-col :span="2"><a href="#c1"><el-menu-item >房屋信息</el-menu-item></a></el-col>
        <el-col :span="2"><a href="#c2"><el-menu-item >费用详情</el-menu-item></a></el-col>

        <el-col :span="2"><a href="#c3"><el-menu-item >位置周边</el-menu-item></a></el-col>
        <el-col :span="2"><a href="#c4"><el-menu-item >附近房源</el-menu-item></a></el-col>
        <el-col :span="2"><a href="#c5"><el-menu-item >推荐房源</el-menu-item></a></el-col>

      </el-row>
    </el-menu>
        <h3 style="margin-bottom: 30px;" id="c1">房源基本信息</h3>
        <el-row>
          <el-col :span="18">
            <el-row>
              <el-col :span="8">
              基本属性
            </el-col>
              <el-col :span="16" >
                    <el-row v-for="item in house.detail" >
                      <el-col :span="12">
                        <div style="float: left">
                        {{item.key}}:{{item.value}}
                        </div>
                      </el-col>
                      <el-col :span="12"v-if="item.key1!==null">
                        <div style="float: left">
                          {{item.key1}}:{{item.value1}}
                        </div>

                      </el-col>
                    </el-row>
              </el-col>
            </el-row>

          </el-col>
          <el-col :span="6">
          <h3>必看好房</h3>
          <div v-for="item in 2">
            <el-card v-for="item in popular_listings" style="margin: 0 30px 0 30px" >
              <img src="{{item.value.img}}" alt="图片走丢了"><br>
              {{item.community}}{{item.unit_type}}<br>
              {{item.district}}{{item.facing}}{{item.area}}
            </el-card>
          </div>
        </el-col>
        </el-row>
    <el-row>
      <el-col :span="18">
        <hr>
        <h3>房源描述</h3>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col :span="4"></el-col>
              <el-col :span="18">梁琴 在线咨询 <br>
              链家 经纪人
              </el-col>
              <el-col :span="2"></el-col>
            </el-row>
          </el-col>
          <el-col :span="18" style="float: right">
            <el-button>电话咨询</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
        <hr>
        <h3 id="c2">费用详情</h3>

        <el-row >
          <el-col :span="6">支付方式</el-col>
          <el-col :span="4">租金 (元/月)</el-col>
          <el-col :span="4">押金 (元)</el-col>
          <el-col :span="4">服务费 (元)</el-col>
          <el-col :span="6">中介费 (元)</el-col>
        </el-row>
        <el-row v-for="item in payment">
          <el-col :span="6">{{item.payment_method}}</el-col>
          <el-col :span="4">{{item.price}}</el-col>
          <el-col :span="4">{{item.deposit}}</el-col>
          <el-col :span="4">{{item.service_charge}}</el-col>
          <el-col :span="6">{{item.intermediary_fees}}</el-col>
        </el-row>

      </el-col>

    </el-row>

    <div>
      <h3 id="c3">地址和交通</h3>
      <div id="container"></div>
      <h3 id="c4">附近房源</h3>
      <el-row >
        <el-col :span="6" v-for="item in 4">
          <el-card v-for="item in popular_listings" style="margin: 0 30px 0 30px">
            <img src="{{item.value.img}}" alt="图片走丢了"><br>
            {{item.community}} {{item.unit_type}}<br>
            {{item.district}} {{item.facing}} {{item.area}}
          </el-card>
        </el-col>
      </el-row>
      <h3 id="c5">推荐房源</h3>
      <el-row >
        <el-col :span="6" v-for="item in 4">
          <el-card v-for="item in popular_listings" style="margin: 0 30px 0 30px">
            <img src="{{item.value.img}}" alt="图片走丢了"><br>
            {{item.community}} {{item.unit_type}}<br>
            {{item.district}} {{item.facing}} {{item.area}}
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {ref} from "vue";
import axios from "axios";

const payment=ref([{payment_method:'季付',price:8000,deposit:8000,service_charge:0,intermediary_fees:8000}])
const popular_listings=ref([{
  img:"background.png",
  community:"小区",
  unit_type:"两室两厅",
  district:"通州区",
  facing:"南 北",
  area:"140平方米"
}])
const path = ref([]);
const current_position = ref([]);
const house = ref({title:'Title',
  subtitle:{
    time:'2024/4/13',
    phone:'123456',
  },
  imgurls:['logo.png','logo.png'],
  price:'2500',
  tags:['tag1','tag2','tag3'],
  simple_message:[
    {key:'key1',value:'v1'},
    {key:'key2',value:'v2'},
    {key:'key3',value:'v3'},
  ],
  detail:[
    {key:'面积：area',value:'v1',key1:'维护：maintenance',value1:'v1'},
    {key:'楼层：floor',value:'v1',key1:'车位：parking_space',value1:'v1'},
    {key:'用电：electricity_consumption',value:'v1',key1:'采暖：heating',value1:'v1'},
    {key:'租期：lease_term',value:'v1',key1:'看房：look_time',value1:'v1'},
    {key:'朝向：facing',value:'v1',key1:'入住：check_in_time',value1:'v1'},
    {key:'电梯elevator',value:'v1',key1:'用水：water',value1:'v1'},
    {key:'燃气：is_gas',value:'v1'},
  ]
});


let map = null;

onMounted(() => {
  AMapLoader.load({
    key: "e79c8142b7d2cf8f8bbde7958c00785c", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    function () {
      //异步同时加载多个插件
      // 添加地图插件
      map.addControl(new AMap.ToolBar()); // 工具条控件;范围选择控件
      map.addControl(new AMap.Scale()); // 显示当前地图中心的比例尺
      map.addControl(new AMap.HawkEye()); // 显示缩略图
      map.addControl(new AMap.Geolocation()); // 定位当前位置
      map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换

      // 以下是鼠标工具插件
      const mouseTool = new AMap.MouseTool(map);
      // mouseTool.rule();// 用户手动绘制折线图,测量距离
    }})
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "2D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });

        // 添加精确定位功能
        AMap.plugin(["AMap.Geolocation"], () => {
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
            maximumAge: 0,            // 定位结果缓存0毫秒，默认：0
            buttonPosition: 'RB',     // 定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,     // 定位成功后是否自动调整地图视野到定位点
          });
          map.addControl(geolocation);
          geolocation.getCurrentPosition();
        });
        // 单击
        map.on('click', (e) => {
          // lng ==> 经度值  lat => 维度值
          current_position.value = [e.lnglat.lng, e.lnglat.lat];
          path.value.push([e.lnglat.lng, e.lnglat.lat]);
          addMarker();
        })


        // 实例化点标记
        // 第一种(封成函数来触发)
        function addMarker() {
          const marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记
            // 通过设置 offset 来添加偏移量
            offset: new AMap.Pixel(-26, -54),
          })
          marker.setMap(map);
        }


      }) .catch((e) => {
          console.log(e);
        });

});


onUnmounted(() => {
  map?.destroy();
});


</script>

<style scoped>
#house_view_content_title{
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  margin-top: 30px;
  margin-bottom: 5px;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
  color: #101d37;
}
#house_view_content_sub_title{
  color: #9399a5;
  font-size: 14px;
  margin-bottom: 30px;
  line-height: 20px;
  text-align: left;
}
#house_view_content_core{
  width: 100%;
  height: 390px;
}
#house_view_content_core_left{
  width: 730px;
  height: 390px;
  float: left;
  position: relative;
  overflow: hidden;
}
#house_view_content_core_right{
  text-align: left;
  width: 400px;
  height: 390px;
  border: 1px solid #e4e6f0;
  padding: 17px 30px 0;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px 30px 0 !important;
  float: right;
}
#house_view_content_core_right_title{
  font-size: 16px;
  color: #fa5741;
  margin-bottom: 10px;
}
#house_view_content_core_right_title_span{
  font-size: 30px;
  font-weight: 700;
  margin-right: 4px;
  line-height: 42px;
}
#house_view_content_core_right_tag{
  padding-bottom: 10px;
  font-size: 0;
  border-bottom: 1px solid #e4e6f0;
}
.house_view_content_core_right_tag_i{
  background-color: rgba(132,154,174,.1);
  border-radius: 2px;
  display: inline-block;
  width: 62px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  font-size: 12px;
  color: #849aae;
  margin-right: 5px;
  margin-bottom: 5px;
  vertical-align: baseline;
}
#house_view_content_core_right_detail{

}
#house_view_content_core_right_detail_ul{
  margin: 0;
  padding: 8px 0 5px;
}
.house_view_content_core_right_detail_ul_li{
  list-style: none;
  font-size: 14px;
  line-height: 14px;
  margin-bottom: 10px;
  color: #101d37;
}
.house_view_content_core_right_detail_ul_li_span{
  color: #9399a5;
  vertical-align: baseline;
  padding: 0;
}
#house_view_content_detail{
  margin-top: 30px;
  text-align: left;
}
.house_view_content_detail_item{
  display: inline-block;
  width: 50%;
  line-height: 18px;
  font-size: 16px;
  margin-bottom: 18px;
}
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}

</style>